import React, { PureComponent, Fragment } from 'react';
import { connect } from 'dva';
import { routerRedux } from 'dva/router';
import moment from 'moment';
import {
  Row,
  Col,
  Card,
  Form,
  Input,
  Select,
  Icon,
  Button,
  Dropdown,
  Menu,
  InputNumber,
  DatePicker,
  Modal,
  message,
  Badge,
  Divider,
  Tabs,
  Table,
  Tooltip,
} from 'antd';
import GeneralTableComponent from 'components/GeneralTableComponent';
import PageHeaderLayout from '../../layouts/PageHeaderLayout';

const TabPane = Tabs.TabPane;
const FormItem = Form.Item;
const { Option } = Select;
const RangePicker = DatePicker.RangePicker;

@connect(({ grossProfit, loading }) => ({
  grossProfit,
  loading: loading.models.grossProfit,
}))
@Form.create()
export default class GrossProfit extends PureComponent {
  state = {
    // modalVisible: false,
    paramList: {
      minDateStr: '',
      maxDateStr: '',
      timeType: '',
      pageNo: 1,
      pageSize: 10,
      source: '',
    },
    totalCountData: [],
  };

  componentWillMount() {
    const { paramList } = this.state;
    switch(this.props.location.pathname.split('/')[1]) {
      case 'statisticsCenterForXBeauty':
        paramList.source = 'xbeauty';
      break;
      case 'statisticsCenterForXflower':
        paramList.source = 'xflower';
      break;
      case 'statisticsCenterForUpoint':
        paramList.source = 'upoint';
      break;
      default:
      break;
    }
  }

  componentDidMount() {
    this.getGrossProfitData();
  }

  getGrossProfitData = () => {
    const { dispatch } = this.props;
    const { paramList } = this.state;

    let postParam = {}
    for (let [key, val] of Object.entries(paramList)) {
      if (val !== '') {
        postParam[key] = val;
      }
    }
    dispatch({
      type: 'grossProfit/fetchProfitCountTableForXBeauty',
      payload: {
        ...postParam
      }
    });
  };

  handleStandardTableChange = (pagination, filtersArg, sorter) => {
    const { paramList } = this.state;
    paramList.pageNo = pagination.current;
    paramList.pageSize = pagination.pageSize;
    this.getGrossProfitData();
  };

  handleDateChange = (dates, dateStrings) => {
    const { paramList } = this.state;
    paramList.minDateStr = dates[0] ? dates[0].format('YYYY-MM-DD') : '';
    paramList.maxDateStr = dates[1] ? dates[1].format('YYYY-MM-DD') : '';
    paramList.pageNo = 1;
    this.getGrossProfitData();
  };

  render() {
    const { grossProfit: { grossProfitData }, loading } = this.props;
    const { totalCountData } = this.state;

    Array.prototype.remove = function(from, to) {
      let rest = this.slice((to || from) + 1 || this.length);
      this.length = from < 0 ? this.length + from : from;
      return this.push.apply(this, rest);
    };
    //过滤空数据
    if (grossProfitData && grossProfitData.list) {
      if (grossProfitData.list[0] && grossProfitData.list[0].date.indexOf("至") != -1) {
        totalCountData[0] = grossProfitData.list[0];
        totalCountData[0].stateDate = grossProfitData.list[0].date.split("至")[0];
        totalCountData[0].endDate = grossProfitData.list[0].date.split("至")[1];
        grossProfitData.list.remove(0);
        //移除首行总计数据
      }
    }

    const totalTableColumns = [{
        title: '起始日期',
        dataIndex: 'stateDate',
        key: 'stateDate',
        render: val => `${val}`
      }, {
        title: '结束日期',
        dataIndex: 'endDate',
        key: 'endDate',
        render: val => `${val}`
      }, {
        title: '出借笔数',
        dataIndex: 'lendNum',
        key: 'lendNum',
        render: val => `${val}`
      }, {
        title: '出借金额',
        dataIndex: 'lendAmount',
        key: 'lendAmount',
        render: val => `${val}`
      }, {
        title: '会员卡数量',
        dataIndex: 'vipCardNum',
        key: 'vipCardNum',
        render: val => `${val}`
      }, {
        title: '会员卡金额',
        dataIndex: 'vipCardAmount',
        key: 'vipCardAmount',
        render: val => `${val}`
      }, {
        title: '结清笔数',
        dataIndex: 'repayNum',
        key: 'repayNum',
        render: val => `${val}`
      }, {
        title: '还款金额',
        dataIndex: 'repayAmount',
        key: 'repayAmount',
        render: val => `${val}`
      }, {
        title: '展期笔数',
        dataIndex: 'extendNum',
        key: 'extendNum',
        render: val => `${val}`
      }, {
        title: '展期费用',
        dataIndex: 'extendFee',
        key: 'extendFee',
        render: val => `${val}`
      }, {
        title: '展期订单总额',
        dataIndex: 'extendOrderAmount',
        key: 'extendOrderAmount',
        render: val => `${val}`
      },{
        title: '利润',
        dataIndex: 'profitAmount',
        key: 'profitAmount',
        render: val => `${val}`
      }]

    const tableColumns = [{
      title: '到期日期',
      dataIndex: 'date',
      key: 'date',
      render: val => `${val}`
    }, {
      title: <span>到期笔数 <Tooltip  title="会员卡数量+展期数量"><Icon type="question-circle" /></Tooltip></span>,
      dataIndex: 'lendNum',
      key: 'lendNum',
      render: val => `${val}`
    },{
      title: <span>当天展期笔数 <Tooltip title="到期日当天展期笔数"><Icon type="question-circle" /></Tooltip></span>,
      dataIndex: 'todayExtendNum',
      key: 'todayExtendNum',
      render: val => `${val}`
    }, {
      title: <span>当天展期金额 <Tooltip title="到期日当天展期金额"><Icon type="question-circle" /></Tooltip></span>,
      dataIndex: 'todayExtendFee',
      key: 'todayExtendFee',
      render: val => `${val}`
    },{
      title: <span>当天展期订单总额 <Tooltip title="到期日当天展期订单总额"><Icon type="question-circle" /></Tooltip></span>,
      dataIndex: 'todayExtendOrderAmount',
      key: 'todayExtendOrderAmount',
      render: val => `${val}`
    }, {
      title: <span>到期金额 <Tooltip  title="实际放款金额+展期订单总金额"><Icon type="question-circle" /></Tooltip></span>,
      dataIndex: 'lendAmount',
      key: 'lendAmount',
      render: val => `${val}`
    }, {
      title: '会员卡数量',
      dataIndex: 'vipCardNum',
      key: 'vipCardNum',
      render: val => `${val}`
    }, {
      title: '会员卡金额',
      dataIndex: 'vipCardAmount',
      key: 'vipCardAmount',
      render: val => `${val}`
    }, {
      title: <span>结清笔数 <Tooltip  title="实际还款结清笔数+展期笔数"><Icon type="question-circle" /></Tooltip></span>,
      dataIndex: 'repayNum',
      key: 'repayNum',
      render: val => `${val}`,
    }, {
      title: <span>还款金额 <Tooltip  title="实际还款+展期订单总额"><Icon type="question-circle" /></Tooltip></span>,
      dataIndex: 'repayAmount',
      key: 'repayAmount',
      render: val => `${val}`,
    }, {
      title: <span>展期笔数 <Tooltip  title="展期后到期日在该日的笔数(6天前展期笔数)"><Icon type="question-circle" /></Tooltip></span>,
      dataIndex: 'extendNum',
      key: 'extendNum',
    },{
      title: '展期费用',
      dataIndex: 'extendFee',
      key: 'extendFee',
      render: val => `${val}`
    }, {
      title: <span>展期订单总额 <Tooltip  title="展期对应的实际借款金额"><Icon type="question-circle" /></Tooltip></span>,
      dataIndex: 'extendOrderAmount',
      key: 'extendOrderAmount',
      render: val => `${val}`,
    }, {
      title: <span>利润 <Tooltip  title="会员卡费+当天展期费+还款金额-出借金额"><Icon type="question-circle" /></Tooltip></span>,
      dataIndex: 'profitAmount',
      key: 'profitAmount',
      render: val => `${val}`,

    }]

    return (
      <PageHeaderLayout title="毛利润统计">
        <Card bordered={false}>
          <Row gutter={{ md: 8, lg: 24, xl: 48 }} style={{marginBottom: 20}}>
            <Col md={16} sm={24} />
            <Col md={8} sm={24}>
              <RangePicker
                ranges={{
                  近7天: [moment().subtract(7, 'days'), moment()],
                  近14天: [moment().subtract(14, 'days'), moment()],
                  近30天: [moment().subtract(30, 'days'), moment()],
                }}
                onChange={this.handleDateChange}
              />
            </Col>
          </Row>

          <div style={{marginBottom: 20}}>
            <Table columns={totalTableColumns} dataSource={totalCountData} pagination={false} rowKey={record => record.date} />
          </div>

          <GeneralTableComponent
            loading={loading}
            data={grossProfitData}
            columns={tableColumns}
            onChange={this.handleStandardTableChange}
            showSizeChanger
            rowKey={'date'}
          />
        </Card>
      </PageHeaderLayout>
    );
  }
}
